<!-- 去处理-交车工单 -->
<template>
  <view class="container">
    <FilterNavbar>
      <template #center>
        <view class="navbar-title"> 去处理 </view>
      </template>
    </FilterNavbar>
    <box-info :carId="form.carId" style="margin: 24rpx"></box-info>
    <view class="viewports">
      <ve-form ref="ve_form" :model="form">
        <ve-card type="none" fold>
          <view class="work_tlt">
            <view class="w-l">工单类型：交车工单</view>
          </view>
          <ve-form-item label="出库里程" unit="公里">
            <ve-input-number :precision="0" :min="0" v-model="form.outCarMileage" />
          </ve-form-item>
          <ve-form-item label="出库油(电)量">
            <ve-input-number :precision="0" :min="1" :max="99999" v-model="form.outCarOil" />
          </ve-form-item>
          <ve-form-item label="备注" labelPosition="top" :borderBottom="false" prop="remark">
            <ve-input type="textarea" v-model="form.remark" placeholder="请输入" :maxlength="100" />
          </ve-form-item>
        </ve-card>
      </ve-form>
    </view>
    <ve-bottom-box>
      <ve-button type="primary" @click="formSubmit" size="long" :loading="okLoading">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, nextTick } from 'vue'
  import FilterNavbar from '@/components/FilterNavbar'
  import useFormFold from '@/hooks/useFormFold'
  import { goHandleAPI } from '@/api/order/workOrder'
  import boxInfo from './shortOrder/components/box-info.vue'

  const initFold1 = ref(true)
  const record = ref(null)
  const form = ref({
    id: '',
    workType: 1,
  })
  const toast = (e) => {
    uni.showToast({
      title: e,
      icon: 'none',
    })
  }
  onLoad((options) => {
    console.log(JSON.parse(options.record))
    record.value = JSON.parse(options.record)
    form.value.id = record.value.id
    form.value.carId = record.value.carId
  })
  const ve_form = ref(null)
  const okLoading = ref(false)
  const formSubmit = () => {
    var params = {
      ...form.value,
    }
    okLoading.value = true
    goHandleAPI(params)
      .then((res) => {
        okLoading.value = false
        if (res.code == 200) {
          toast(res.message)
          uni.$emit('refreshData')
          uni.navigateBack()
        } else {
          toast(res.message)
          return false
        }
      })
      .catch(() => {
        okLoading.value = false
      })
  }
  defineExpose({})
</script>

<style lang="scss" scoped>
  .container {
    background: #f7f8fa;
  }

  .viewports {
    display: flex;
    flex-direction: column;
    padding: 24rpx;
    padding-top: 0;
  }
  .work_tlt {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid rgba(216, 216, 216, 0.3);
    .w-l {
      font-size: 32rpx;
      font-weight: 600;
      color: #191c27;
    }
  }
</style>
